// Base class
.tooltip {
	position: absolute;
	display: block;
	visibility: visible;
	line-height: 1.4;
	.opacity(0);

	&.tooltip-green {

		.tooltip-inner {
			background-color: @brand-success;
		}

		&.top .tooltip-arrow {
			border-top-color: @brand-success;
		}
		&.top-left .tooltip-arrow {
			border-top-color: @brand-success;
		}
		&.top-right .tooltip-arrow {
			border-top-color: @brand-success;
		}
		&.right .tooltip-arrow {
			border-right-color: @brand-success;
		}
		&.left .tooltip-arrow {
			border-left-color: @brand-success;
		}
		&.bottom .tooltip-arrow {
			border-bottom-color: @brand-success;
		}
		&.bottom-left .tooltip-arrow {
			border-bottom-color: @brand-success;
		}
		&.bottom-right .tooltip-arrow {
			border-bottom-color: @brand-success;
		}
	}
}

// Wrapper for the tooltip content
.tooltip-inner {
	padding: 5px 10px;
	text-align: center;
	text-decoration: none;
	&:extend(.heading-font);
	text-transform: uppercase;
	background-color: @menu-color;
	.border-radius(0px);
}


.tooltip {
	&.top .tooltip-arrow {
		bottom: 0;
		left: 50%;
		border-top-color: @menu-color;
	}
	&.top-left .tooltip-arrow {
		bottom: 0;
		border-top-color: @menu-color;
	}
	&.top-right .tooltip-arrow {
		bottom: 0;
		border-top-color: @menu-color;
	}
	&.right .tooltip-arrow {
		top: 50%;
		left: 0;
		border-right-color: @menu-color;
	}
	&.left .tooltip-arrow {
		top: 50%;
		right: 2px;
		border-left-color: @menu-color;
	}
	&.bottom .tooltip-arrow {
		top: 0;
		left: 50%;
		border-bottom-color: @menu-color;
	}
	&.bottom-left .tooltip-arrow {
		top: 0;
		border-bottom-color: @menu-color;
	}
	&.bottom-right .tooltip-arrow {
		top: 0;
		border-bottom-color: @menu-color;
	}
}
